<template>
    <div class="page-wrap page-wrap-ql" v-loading="loading">
        <div class="page-cont" v-if="detail.id">
            <header-info :detail="headerInfo" v-if="headerInfo.productManager" />
            <!-- 需求管理情况 -->

            <JiraXuqiuGuanli :info="requireInfos" :detail="detail" v-if="detail.dataSource === '外部' && detail.pmpProductDetailDTO.projectKey" />
            <XuqiuGuanli :info="requireInfos" :detail="detail" v-else />

            <div style="height: 20px; background: #f0f2f5"></div>

            <h-section collapse>
                <template #title>
                    <flexbox>
                        <span>{{ `${detail.reportPeriod}已发布版本` }}</span>
                        <a-tooltip title="按照预发布版本的【上线日期】在时间段内统计">
                            <QuestionCircleOutlined class="margin-l-8" />
                        </a-tooltip>
                    </flexbox>
                </template>
                <release-version-table
                    ref="releaseVersionTableRef"
                    :list="releaseVersion"
                    :detail="detail"
                    :parentCatalogCode="parentInfo.catalogCode"
                    :hasAuth="hasAuth"
                />
            </h-section>

            <h-section collapse>
                <template #title>
                    <flexbox>
                        <span>进行中版本</span>
                        <a-tooltip title="按照预发布版本的【创建时间】在时间段内统计">
                            <QuestionCircleOutlined class="margin-l-8" />
                        </a-tooltip>
                    </flexbox>
                </template>
                <process-version-list :list="processVersion" :detail="detail" />
            </h-section>

            <h-section collapse v-if="!detail.pmpProductDetailDTO.projectKey">
                <template #title>
                    <flexbox>
                        <span>进行中延期版本</span>
                        <a-tooltip title="截止报告生成时间，计划上线日期已过，但流程仍未走完的版本将被视为进行中延期">
                            <QuestionCircleOutlined class="margin-l-8" />
                        </a-tooltip>
                    </flexbox>
                </template>
                <un-online-version-list :list="processOverDueVersion" :detail="detail" />
            </h-section>

            <a-form layout="inline" :model="form" v-if="+detail.stage >= 3 || detail.status === '已拒绝'">
                <a-row>
                    <a-col :span="16">
                        <a-form-item label="审核意见" name="auditOpinion">
                            <div style="width: 100%">
                                <a-textarea
                                    v-model:value="form.auditOpinion"
                                    showCount
                                    :maxlength="500"
                                    auto-size
                                    v-if="detail.stage === '3' && hasAuth"
                                />
                                <span style="white-space: pre-wrap" v-html="form.auditOpinion" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <slot></slot>
            <history-record :platformArr="platformArr" v-if="platformArr.length" />
        </div>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import {
    HeaderInfo,
    ReleaseVersionTable,
    UnOnlineVersionList,
    XuqiuGuanli,
    ProcessVersionList,
    HistoryRecord,
    JiraXuqiuGuanli
} from './components/index';
import { QuestionCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons-vue';
import { useRouterApi } from '@/hooks/common/useRouterApi';
import { defineComponent, ref, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    components: {
        QuestionCircleOutlined,
        ClockCircleOutlined,
        CloseCircleOutlined,
        CheckCircleOutlined,
        ReleaseVersionTable,
        UnOnlineVersionList,
        HistoryRecord,
        XuqiuGuanli,
        JiraXuqiuGuanli,
        HeaderInfo,
        ProcessVersionList
    },
    props: {
        catalogCode: {
            type: String,
            default: ''
        },
        parentInfo: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const requireInfoTableRef = ref<any>();
        const releaseVersionTableRef = ref<any>();
        const processOverDueVersionTableRef = ref<any>();
        const { handleBack, route } = useRouterApi({
            backQuery: {
                path: '/energyManage/analysisReport'
            }
        });
        const state = reactive<any>({
            loading: false,
            detail: {},
            headerInfo: {},
            requireInfos: null,
            releaseVersion: [],
            processVersion: [],
            processOverDueVersion: [],
            form: {
                auditOpinion: '',
                pass: '是'
            },
            platformArr: [],
            hasAuth: false
        });

        // 详情汇总，因为可能有多个子产品
        const getDetailData = async () => {
            state.releaseVersion = [];
            state.processVersion = [];
            state.processOverDueVersion = [];
            const headerInfo: any = {
                faultRate: 0,
                onlineAvgDays: 0,
                productManager: '',
                requireManager: ''
            };
            state.loading = true;
            const query = {
                id: route.query.id,
                startTime: route.query.startTime,
                endTime: route.query.endTime,
                catalogCode: props.catalogCode
            };
            // 如果是技术中台要特殊处理
            if (props.catalogCode === '2202303080042') {
                query.catalogCode = props.parentInfo.subNodes.map((item) => item.catalogCode).join(',');
            }
            const { success, moule } = await api.systemReportModel.getSystemReportInfos(query);
            if (success) {
                state.platformArr = [...moule];
                moule.forEach((item, index) => {
                    headerInfo.isOutsideSystem = item.pmpProductDetailDTO.isOutsideSystem;
                    headerInfo.releasePeriodAvgWeeks = item.pmpProductDetailDTO.releasePeriodAvgWeeks;
                    headerInfo.faultRate += item.faultRate;
                    if (headerInfo.productManager) {
                        if (item.productManager) {
                            headerInfo.productManager += `,${item.productManager}`;
                        }
                    } else {
                        if (item.productManager) {
                            headerInfo.productManager = item.productManager;
                        }
                    }
                    if (headerInfo.requireManager) {
                        if (item.requireManager) {
                            headerInfo.requireManager += `,${item.requireManager}`;
                        }
                    } else {
                        if (item.requireManager) {
                            headerInfo.requireManager = item.requireManager;
                        }
                    }

                    headerInfo.onlineAvgDays += item.onlineAvgDays;
                    let { requireInfos, releaseVersion, processVersion, processOverDueVersion, systemName } = item;
                    state.detail = state.detail || {};
                    state.detail = { ...state.detail, ...item };
                    if (index === 0) {
                        state.requireInfos = [...requireInfos];
                    } else {
                        // addIds需要，号拼接
                        if (requireInfos[0].addIds) {
                            state.requireInfos[0].addIds = `${state.requireInfos[0].addIds}${state.requireInfos[0].addIds ? ',' : ''}${
                                requireInfos[0].addIds
                            }`;
                        } else {
                            state.requireInfos[0].addIds = `${state.requireInfos[0].addIds}`;
                        }

                        if (requireInfos[1].addIds) {
                            state.requireInfos[1].addIds = `${state.requireInfos[1].addIds}${state.requireInfos[1].addIds ? ',' : ''}${
                                requireInfos[1].addIds
                            }`;
                        } else {
                            state.requireInfos[1].addIds = `${state.requireInfos[1].addIds}`;
                        }
                        // 其他数量累计
                        ['addCount', 'lastAddCount', 'processCount', 'onlineCount', 'suspendCount'].forEach((key) => {
                            state.requireInfos[0][key] = state.requireInfos[0][key] += requireInfos[0][key];
                            state.requireInfos[1][key] = state.requireInfos[1][key] += requireInfos[1][key];
                        });
                    }

                    if (releaseVersion.length) {
                        releaseVersion = releaseVersion.map((item) => ({
                            ...item,
                            systemName
                        }));
                    }
                    state.releaseVersion = [...state.releaseVersion, ...releaseVersion];
                    state.processVersion = [...state.processVersion, ...processVersion];
                    state.processOverDueVersion = [...state.processOverDueVersion, ...processOverDueVersion];
                });

                headerInfo.faultRate = (headerInfo.faultRate / moule.length).toFixed(2);
                headerInfo.onlineAvgDays = (headerInfo.onlineAvgDays / moule.length).toFixed(2);

                if (headerInfo.productManager) {
                    const arr = Array.from(new Set(headerInfo.productManager.split(',')));
                    headerInfo.productManager = arr.join(',');
                }
                if (headerInfo.requireManager) {
                    const arr = Array.from(new Set(headerInfo.requireManager.split(',')));
                    headerInfo.requireManager = arr.join(',');
                }
                state.headerInfo = {
                    ...state.detail,
                    ...headerInfo,
                    parentCatalogCode: props.parentInfo.catalogCode
                };
            }
            state.loading = false;
        };

        watch(
            () => props.catalogCode,
            (n) => {
                if (n) {
                    getDetailData();
                }
            },
            {
                immediate: true
            }
        );
        return {
            ...toRefs(state),
            handleBack,
            getDetailData,
            requireInfoTableRef,
            releaseVersionTableRef,
            processOverDueVersionTableRef
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .btn-group {
            margin: 24px 0;
            button + button {
                margin-left: 8px;
            }
        }
    }
}
// 去掉表头颜色
::v-deep(.ant-table-thead) > tr > th {
    background: #eaf5fe !important;
    font-weight: 400;
    color: @primary-color;
}
::v-deep(.ant-divider) {
    border-top: 2px solid #eaf5fe;
}
</style>@/views/energyManage/analysisReport/detail/DetailA/components/index